<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-list>
        <van-cell
          class="search-mList"
          v-for="item in musicSearchLIst"
          :key="item.audio_id"
          :title="item.filename"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      list: [],
      musicSearchLIst: [],
      isLoading: false,
      val: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch(val) {
      this.val = val
      this.getMusicSearchList(val)
    },
    onCancel() {
      this.$toast('取消')
      this.musicSearchLIst = []
    },
    async getMusicSearchList(val) {
      const { data: res } = await this.axios.get('api/music_search/' + val)
      if (res.code === 200) {
        this.musicSearchLIst = res.data.info
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.onSearch(this.val)
      }, 1000)
    }
  } /* ,
  watch: {
    value: {
      handler(newName, oldName) {
        console.log(newName)
        console.log(oldName)
      },
      immediate: true
    }
  } */
}
</script>
<style scoped lang="less">
/deep/ .search-mList {
  padding: 1rem 1rem;
  font-size: 1rem;
  line-height: 0;
}
</style>